<script setup lang="ts">
  import { inject, nextTick } from "vue"
  import { HOME_URL } from "@/config"
  import { useTabsStore } from "@/stores/modules/tabs"
  import { useGlobalStore } from "@/stores/modules/global"
  import { useKeepAliveStore } from "@/stores/modules/keepAlive"
  import { useRoute, useRouter } from "vue-router"

  const route = useRoute()
  const router = useRouter()
  const tabStore = useTabsStore()
  const globalStore = useGlobalStore()
  const keepAliveStore = useKeepAliveStore()

  // refresh current page
  const refreshCurrentPage: Function = inject("refresh") as Function
  const refresh = () => {
    setTimeout(() => {
      keepAliveStore.removeKeepAliveName(route.name as string)
      refreshCurrentPage(false)
      nextTick(() => {
        keepAliveStore.addKeepAliveName(route.name as string)
        refreshCurrentPage(true)
      })
    }, 0)
  }

  // maximize current page
  const maximize = () => {
    globalStore.setGlobalState("maximize", true)
  }

  // Close Current
  const closeCurrentTab = () => {
    if (route.meta.isAffix) return
    tabStore.removeTabs(route.fullPath)
    keepAliveStore.removeKeepAliveName(route.name as string)
  }

  // Close Other
  const closeOtherTab = () => {
    tabStore.closeMultipleTab(route.fullPath)
    keepAliveStore.setKeepAliveName([route.name] as string[])
  }

  // Close All
  const closeAllTab = () => {
    tabStore.closeMultipleTab()
    keepAliveStore.setKeepAliveName()
    router.push(HOME_URL)
  }
</script>

<template>
  <el-dropdown trigger="click" :teleported="false">
    <el-button size="small" type="primary">
      <span>更多</span>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="refresh">
          <el-icon><Refresh /></el-icon>刷新
        </el-dropdown-item>
        <el-dropdown-item @click="maximize">
          <el-icon><FullScreen /></el-icon>最大化
        </el-dropdown-item>
        <el-dropdown-item divided @click="closeCurrentTab">
          <el-icon><Remove /></el-icon>关闭当前
        </el-dropdown-item>
        <el-dropdown-item @click="closeOtherTab">
          <el-icon><CircleClose /></el-icon>关闭其他
        </el-dropdown-item>
        <el-dropdown-item @click="closeAllTab">
          <el-icon><FolderDelete /></el-icon>关闭所有
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
  @import "../index.scss";
</style>
